<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">

<head>
	<title>.intabs() &raquo; A jQuery plugin for tabbed content</title>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link href="browser_core.css" rel="stylesheet" type="text/css" />
  <link href="main.css" rel="stylesheet" type="text/css" />
  <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js" type="text/javascript">
  </script>

  <script src="jquery.intabs.js" type="text/javascript">
  </script>
  <script type="text/javascript">

    $(document).ready(function(){
      $('div.demo').intabs();
    }); // /document.ready

  </script>

</head>

<body>

<h1>.intabs()<br />A jQuery Plugin</h1>

<div class="content">
  <p>Simple version of <em>show-this-in-tabs</em> content that requires no <code>id</code> nor hardcoded numbering of content containers</p>

  <p>Download: <a href="jquery.intabs.js">jquery.intabs.js</a> (requires <a href="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js">jQuery 1.2.6</a> or grater)</p>
  <p>Jump to: <a href="#demo">Demo</a>, <a href="#description">Description</a>, <a href="#step-by-step">Basic step-by-step usage</a></p>

  <p>Author: <a href="http://lukasztyrala.pl">Łukasz Tyrała</a> | Version: 0.1 (beta) | Updated: 2008-12-11</p>
</div>

<h2 id="demo">Demo</h2>
<div class="demo">

  <ul class="tabs">
    <li class="normal"><span>Ancient and Classic Japan I</span></li>

    <li><a>Yamato</a></li>
    <li><a>Kofun</a></li>
  </ul>

  <div class="sub-section">
    <p>
      The <strong>Yamato</strong> polity was the main ruling power in Japan from the middle of the 3rd century until 710. The Kofun period (mid 3rd century – mid 6th century), is defined by the construction of many keyhole-shaped tumuli. At the beginning of the Asuka period (mid 6th century – 710), the capital was moved to Asuka, the southernmost part of Nara Basin. The main difference between the Yayoi period and the Kofun-Asuka periods is the development from a sedentary and agricultural culture to a more advanced and militaristic culture due to influences from China via the Korean peninsula. This was replaced by Tang Dynasty Chinese influences during the Nara period which introduced centralized imperial government, new aesthetics and new religious ideas instead of the military advances of the Yamato era.
    </p>
    <p>
      The Ryukyuan languages and Japanese most likely diverged during this period.
    </p>
  </div>

  <div class="sub-section">
    <p>
      The <strong>Kofun</strong> period (lit. "period of ancient mound/tomb"?), beginning around AD 250, is named after the large burial mounds (kofun) that appeared at the time. The Kofun period saw the establishment of strong military states centered around powerful clans, and the establishment of the dominant Yamato polity centered in the Yamato and Kawachi provinces, from the 3rd century to the 7th century, origin of the Japanese imperial lineage. The polity, suppressing the clans and acquiring agricultural lands, maintained a strong influence in the western part of Japan. Japan started to send tributes to Imperial China in the 5th century. In the Chinese history records, the polity was called Wa and its five kings were recorded. Based upon the Chinese model, they developed a central administration and an imperial court system and its society was organized into occupation groups.
    </p>
    <p>
      Most scholars believe that there were massive transmissions of technology and culture from China via Korea to Japan which is evidenced by material artifacts in tombs of both states in the Proto-Three Kingdoms of Korea and Kofun eras, and the later wave of Baekje immigrants to Yamato.
    </p>
    <p>

      Close relationships between the Three Kingdoms of Korea and Japan began during the middle of this period, around the end of the 4th century. According to a controversial part on the Gwanggaeto Stele, Japan actively participated with large armies on the Korean Peninsula during the late 4th and early 5th centuries. According to the Book of Song, of the Liu Song Dynasty, the Liu-Song emperor formally awarded the king of Yamato, which he considered to be his vassal, the title of military sovereignty over Silla and the Gaya confederacy.The Samguk Sagi (Chronicles of the Three Kingdoms) recorded Baekje and Silla sent their princes as hostages to the Wa to ensure military support; King Asin of Baekje sent his son Jeonji in 397 and King Silseong of Silla sent his son in 402.
    </p>
  </div>

</div>
<div class="demo">

  <ul class="tabs">
    <li class="normal"><span>Ancient and Classic Japan II</span></li>

    <li><a>Asuka</a></li>
    <li><a>Nara</a></li>
    <li><a>Heian</a></li>
  </ul>

  <div class="sub-section">
    <p>
      The <strong>Asuka</strong> period (lit. "period of flying bird"?), 538 to 710, is when the proto-Japanese Yamato polity gradually became a clearly centralized state, defining and applying a code of governing laws, such as the Taika Reform and Taihō Codes. The introduction of Buddhism led to the discontinuing of the practice of large kofun.
    </p>
    <p>

      Buddhism was introduced to Japan in 538 by Baekje, to which Japan provided military support, and it was promoted by the ruling class. Prince Shotoku devoted his efforts to the spread of Buddhism and Chinese culture in Japan. He is credited with bringing relative peace to Japan through the proclamation of the Jūshichijō kenpō, often referred to in Japan as the Seventeen-article constitution, a Confucian style document that focused on the kinds of morals and virtues that were to be expected of government officials and the emperor's subjects.
    </p>
    <p>
      In a letter brought to the Emperor of China by an emissary from Japan in 607 stated that the Emperor of the Land where the Sun rises (Japan) sends a letter to the Emperor of the land where Sun sets (China), thereby implying an equal footing with China which angered the Chinese emperor.
    </p>
    <p>
      Starting with the Taika Reform Edicts of 645, Japanese intensified the adoption of Chinese cultural practices and reorganized the government and the penal code in accordance with the Chinese administrative structure (Ritsuryo) of the time. This paved the way for the influential Confucian philosophy in Japan until the 19th century. This period also saw the first uses of the word Nihon as a name for the emerging state.
    </p>
  </div>

  <div class="sub-section">

    <p>
      The <strong>Nara</strong> period of the 8th century marked the first emergence of a strong Japanese state. Following an Imperial rescript by Empress Genmei the move of the capital to Heijō-kyō, present-day Nara, took place in 710. The city was modelled on the capital of the Chinese Tang Dynasty, Chang'an (now Xi'an).
    </p>
    <p>
      During the Nara Period, political developments were quite limited, since members of the imperial family struggled for power with the Buddhist clergy as well as the regents, the Fujiwara clan. Japan did enjoy friendly relations with Silla as well as formal relationships with Tang China. In 784, the capital was moved again to Nagaoka to escape the Buddhist priests and then in 794 to Heian-kyo, present-day Kyoto.
    </p>
    <p>
      Historical writing in Japan culminated in the early 8th century with the massive chronicles, the Kojiki (The Record of Ancient Matters, 712) and the Nihon Shoki (Chronicles of Japan, 720). These chronicles give a legendary account of Japan's beginnings, today known as the Japanese mythology. According to the myths contained in these 2 chronicles, Japan was founded in 660 BC by the ancestral Emperor Jimmu, a direct descendant of the Shinto deity Amaterasu, or the Sun Goddess. The myths recorded that Jimmu started a line of emperors that remains to this day. Historians assume the myths partly describe historical facts but the first emperor who actually existed was Emperor Ōjin, though the date of his reign is uncertain. After the Nara period, actual political power has not been in the hands of the emperor, but in the hands of the court nobility, the shoguns, the military and, more recently, the prime minister.
    </p>

  </div>

  <div class="sub-section">
    <p>
      The <strong>Heian</strong> period (lit. "peace, tranquility", Heian period?), lasting from 794 to 1185, is the final period of classical Japanese history. It is considered the peak of the Japanese imperial court and noted for its art, especially in poetry and literature. In the early 11th century, Lady Murasaki wrote the world's oldest surviving novel called The Tale of Genji. The Man'yōshū and Kokin Wakashū, the oldest existing collections of Japanese poetry, were compiled in the period.
    </p>
    <p>
      Strong differences from mainland Asian cultures emerged (such as an indigenous writing system, the kana). Chinese influence had reached its peak, and then effectively ended with the last Imperial-sanctioned mission to Tang China in 838, due to the decline of the Tang Dynasty, although trade expeditions and Buddhist pilgrimages to China continued.
    </p>

    <p>
      Political power in the Imperial court was in the hands of powerful aristocratic families, especially the Fujiwara clan, who ruled under the titles Sessho and Kampaku (regents).
    </p>
    <p>
      The end of the period saw the rise of various military clans. The four most powerful clans were the Minamoto clan, the Taira clan, the Fujiwara clan, and the Tachibana clan. Towards the end of the 12th century, conflicts between these clans turned into civil war, such as the Hōgen and Heiji Rebellions, followed by the Genpei war, from which emerged a society led by samurai clans, under the political rule of the shogun.
    </p>
  </div>

</div>

<h2 id="description">Description</h2>

<div class="content">
  <ul>
    <li>No <code>id</code> needed</li>
    <li>No sections numbering needed</li>
    <li>You can have multiple <code>.your-caintainer</code> boxes on the same page and always only <code>$('your-container').intabs();</code> is needed</li>

    <li>By adding <code>class="normal"</code> to <code>&lt;li&gt;</code> you exclude it from beeing a tab</li>
    <li>You can add as many tabs and contents as you like and no numbering nor changes are needed.<br />
    <strong>Important!</strong> But remeber that ammount of <code>&lt;li&gt;</code> and tab contents (<code>.sub-section</code> by deafult) must be equal</li>

    <li>This is <em>so-called</em> alpha release so do not expect too much of it</li>
    <li>Modify this as you wish</li>
    <li>I tested it with 1.2.6 jQuery version</li>
  </ul>
</div>

<h2 id="step-by-step">Basic step-by-step usage</h2>

<div class="content">
<ol>
  <li>
  <p>Create xhtml that goes like this</p>
  <p>[OPTIONAL] Add class "normal" to li that you do not want to be a tab</p>
  <code>
      &lt;div class="your-container"&gt;<br />

      &nbsp;&nbsp;&lt;ul class="tabs"&gt;<br />

        &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;[1]&lt;/li&gt;<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;[2]&lt;/li&gt;<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;[3]&lt;/li&gt;<br />
      &nbsp;&nbsp;&lt;/ul&gt;<br />

      &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="sub-section"&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;[1]<br />
      &nbsp;&nbsp;&lt;/div&gt;<br />

      &nbsp;&nbsp;&lt;div class="sub-section"&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;[2]<br />

      &nbsp;&nbsp;&lt;/div&gt;<br />

      &nbsp;&nbsp;&lt;div class="sub-section"&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;[3]<br />
      &nbsp;&nbsp;&lt;/div&gt;<br />

      &lt;/div&gt; &lt;-- /.your-cantainer --&gt;<br />

  </code>
  </li>

  <li>
    <p>Tell the plugin which elements are containers for tabbed content</p>
    <code>$('your-container').intabs();</code>
  </li>

  <li>

    <p>Enjoy!</p>
    <p>[OPTIONAL] If not (a) try to improve by yourself, (b) give me a feedback</p>
  </li>
</ol>

</div>
</body>
</html>
